<template>
	<div class="body">
		<div class="loginbox">
			<div class="flex con">
				<div class="left-box">
					<el-image :src="'/images/banner_ad1.png'" class="left-box-img" :fit="'cover'"></el-image>
					<div class="text-content">
						<h3 class="e-m-0">猿脉</h3>
						<h3>再生回收生态云平台</h3>
						<div class="s_text e-p-t-10">赋能再生资源回收客户组数智化管理</div>
						<div class="s_text">助您实现打包回收站经营场景的全面数智化</div>
						<div class="s_text">构筑城市再生资源回收运营智慧生态圈</div>
					</div>
				</div>
				<div class="right-box">
					<!-- 第一步登录账号 -->
					<div v-if="loginStep == 1">
						<!-- 这是一进来的登录 -->
						<div class="logon">
							<div class="title e-p-b-10">
								<div class="logo">
									<!-- <el-image :src="fileURL + websetting.sitelogoimg" :fit="'contain'"
										style="width: 150px;height: 150px;">
									</el-image> -->
									<el-image src="/images/logo.png" :fit="'contain'"
										style="width: 150px;height: 150px;">
									</el-image>
								</div>
								<!-- <h1 class="e-m-b-15">欢迎使用{{ websetting.name }}</h1> -->
							</div>
							<ul>
								<li @click="changeLogontype(true, '/User/Account/SMSLogin')"
									:class="{ active: logontype == true }">
									验证码登录</li>
								<li @click="changeLogontype(false, '/User/Account/login')"
									:class="{ active: logontype == false }">密码登录
								</li>
							</ul>
							<div class="inputtext">
								<el-form :label-position="labelPosition" label-width="80px" ref="form" :model="form"
									:rules="rules" @submit.native.prevent>
									<el-form-item prop="mobile">
										<el-input v-model="form.mobile" :placeholder="logontype ? '请输入手机号' : '请输入手机号'"
											prefix-icon="el-icon-user-solid"></el-input>
									</el-form-item>
									<!-- 这个是第一部分 -->
									<el-form-item prop="password" v-if="logontype == false">
										<el-input placeholder="请输入密码" v-model="form.password" show-password
											prefix-icon="el-icon-s-grid">
										</el-input>
									</el-form-item>
									<!-- 这个是第二部分 -->
									<el-form-item prop="captcha" v-else>
										<el-input v-model="form.captcha" placeholder="请输入您接收到的验证码"
											prefix-icon="el-icon-s-grid">
											<template slot="append">
												<el-button type="primary" @click="getTelCode" :disabled="getCodeBtn">
													{{ getCodeText }}</el-button>
											</template>
										</el-input>
									</el-form-item>

									<el-form-item prop="captcha" v-if="codeImg != '' && logontype == false">
										<el-input v-model="form.captcha" prefix-icon="el-icon-unlock" placeholder="请输入验证码"
											class="form-input">
											<template slot="append">
												<img class="codeImg" :src="codeImg" ref="codeImg" @click="getCode">
											</template>
										</el-input>
									</el-form-item>
									<el-form-item>
										<div class="bottomtips">
											<span>登录即表示已阅读并同意 <a href="javascript:;"
													@click="goiframe('/home/privacyPolicy/', '用户隐私政策协议')">《用户隐私政策协议》</a>及<a
													href="javascript:;"
													@click="goiframe('/home/regAgreement/', '用户注册协议')">《用户注册协议》</a></span>
										</div>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="submitdata('form')" native-type="submit"
											:loading="loading" class="login-btn">登录系统</el-button>
										<!-- <el-button type="primary" @click="textlogin" native-type="submit"
											:loading="loading" class="login-btn">登录系统</el-button> -->
									</el-form-item>
								</el-form>
							</div>
						</div>
					</div>
					<!-- 第二步登录账号 -->
					<div v-if="loginStep == 2">
						<div class="choosePoint">
							<div class="title">选择站点登录</div>
							<div class="list">
								<div class="item" v-for="(item, index) in selectLogin.list" :key="index" @click="selectLoginAccount(item)">
									<div>
										<div class="name">
											<span>{{ item.name }}</span>
											<el-tag v-if="item.operatorManager" type="success" size="mini">
												<span>管理员</span>
											</el-tag>
										</div>
										<div>
											<span class="tips e-font-12">{{ item.tips }}</span>
										</div>
									</div>
									<i class="el-icon-arrow-right"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer e-font-14 text-center">
			<a href="https://beian.miit.gov.cn" class="footer"><span>{{ websetting.copyright }}</span></a>
		</div>
		<div class="dialogPage">
			<el-dialog :title="iframe.title" :visible.sync="dialogVisible" width="1200px">
				<iframe :src="iframe.link" width="1100px" height="600px" style="border: 0;" ref="iframe"
					class="dialog-text"></iframe>
			</el-dialog>
		</div>
		<div class="dialogCode">
			<el-dialog title="验证" :visible.sync="dialogVisible1" width="400px">
				<div class="main" @click="getGuiCode()" style="cursor: pointer;">
					<el-image style="width: 100%; height: auto" :src="countCodeImg" fit="fill" class="images"
						ref="countCodeImg">
					</el-image>
				</div>
				<div class="inputCode">
					<el-input v-model="code" placeholder="请输入图片中的结果" class="input"></el-input>
					<el-button type="primary" @click="decideCode" class="button e-m-l-15">确 定</el-button>
				</div>
				<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="decideCode">确 定</el-button>
				</span> -->
			</el-dialog>
		</div>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close"
			:pintuImg="pintuImg" :pintukuai="pintukuai" :ynumber="ynumber" :err="verifyErr" ref="verifyElement">
		</slider-verify>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex';

export default {
	data() {
		return {
			loginStep: 1, //登录步骤 1：登录 2：选择站点
			// 选择站点账号
			selectLogin:{
				tempToken: '',
				operatorid: 0,
				userid: 0,
				list: [
					
				]
			},
			countCodeImg: '', //验证码图片,
			code: "", //发送短信验证码
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			dialogVisible1: false,
			labelPosition: 'top',
			logontype: false, // 登录类型判断，true为验证码登录
			input: '',
			dialogVisible: false,
			form: {
				mobile: '',
				password: '',
				captcha: '',
				CaptchaGuid: '',
				captcha: ''
			},
			rules: {
				mobile: [{
					required: true,
					message: '请输入账号',
					trigger: 'blur'
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}],
				// captcha: [{
				// 	required: true,
				// 	message: '请输入验证码',
				// 	trigger: 'blur'
				// }],
				// captcha: [{
				// 	required: true,
				// 	message: '请输入短信验证码',
				// 	trigger: 'blur'
				// }]
			},
			codeImg: '',
			loading: false,
			iframe: {
				link: '',
				title: ''
			},
			getCodeBtn: false,
			getCodeText: '点击获取验证码',
			apiLink: '/User/Account/login',
			// 滑块验证参数
			sliderVerifyFLag: false,
			pintuImg: '',
			pintukuai: '',
			ynumber: 0,
			verifyErr: false
		};
	},
	computed: {
		...mapState({
			webSetting: state => state.webSetting
		})
	},
	mounted() {
		this.err = this.$router.history.current.query.status;
		if (this.err == 2) {
			this.$message({
				type: 'error',
				message: '登录异常或过期，请重新登录',
				duration: 5000
			})
		}

		localStorage.clear()
	},
	methods: {
		textlogin() {
			this.$message({
				type: 'success',
				message: '登陆成功',
				duration: 5000
			})
			this.$router.push({
				path:'/'
			})
		},
		// 获取滑块验证信息
		getSlideCaptch() {
			this.$axios.get('/SlideCaptcha/GetSlideCaptcha').then((res) => {
				this.pintuImg = res.src1
				this.pintukuai = res.src2
				this.ynumber = res.ynumber
				this.form.guid = res.guidid
				this.sliderVerifyFLag = true
			}).catch((err) => {
				this.loading = false
			})
		},
		// 滑块验证结果回调函数
		verifyResult(oldx) {
			this.form.countResult = Math.round(oldx);
			// 登录类型判断，true为验证码登录
			if (this.logontype) {
				//验证码登录
				this.getLoginCaptcha().then(()=>{
					// this.$store.dispatch('signalrConnection')
				})
			} else {
				this.decideCode().then(()=>{
					// this.$store.dispatch('signalrConnection')
				})
			}
		},
		//验证码获取
		getLoginCaptcha() {
			return this.$axios.get('/User/Account/SendLoginCaptcha?mobile=' + this.form.mobile + '&guid=' + this.form.guid + '&countresult=' + this.form.countResult).then((res) => {
				if (res) {
					// 验证弹窗
					this.sliderVerifyFLag = false
					// 短信验证码
					this.code = ""
					this.$message.success(res.msg);
					let time = 60
					let timer = setInterval(() => {
						this.getCodeBtn = true
						--time
						this.getCodeText = time + '秒后重新获取'
						if (time == 0) {
							this.getCodeBtn = true
							this.getCodeText = "点击获取验证码"
							clearInterval(timer)
						}
					}, 1000)
				} else {
					this.getSlideCaptch()
				}

			}).catch(res => {
				this.$refs.verifyElement.refreshVerify(); //用ref直接操纵这个组件里面的这个方法
				this.code = ""
			})
		},
		// 关闭滑块验证弹窗
		close(state) {
			this.sliderVerifyFLag = state;
			this.loading = false;
		},
		// 刷新滑块验证
		refresh() {
			this.getSlideCaptch();
		},
		decideCode() {
			this.loading = true
			return this.$axios.post(this.apiLink, this.form).then((res) => {
				console.log(res)
				this.loading = false
				let data = res
				let lifeData = {
					authorization: data.token,
					userid: data.userid,
					operatorid: 0
				}
				localStorage.setItem('lifeData',JSON.stringify(lifeData))
				this.selectLogin.tempToken = data.token
				this.selectLogin.userid = data.userid
				this.selectLogin.operatorid = 0
				this.$store.dispatch('getUserInfo').then((res) => {
					console.log('获取用户信息',res)
					localStorage.setItem("UserType",4)

					this.selectLogin.list = []
					let operator = res.bindinfo.operator
					if(operator.ismanager == true){ 
						this.selectLogin.list.push({
							id: operator.id,
							name: operator.name,
							operatorManager: operator.ismanager,
							tips: `有${operator.franchiselist.length}个下属加盟商`
						})
					}else{
						let franchiselist = operator.franchiselist.filter((item)=>item.ismanager == true)
						franchiselist.forEach((cell)=>{
							this.selectLogin.list.push({
								id: operator.id,
								operatorManager: false,
								name: cell.name,
								tips: `所属运营商：${operator.name}`
							})
						})
					}
					if(this.selectLogin.list.length > 0){
						// 如果只有一个登录站点时自动登录
						if(this.selectLogin.list.length == 1){
							this.selectLoginAccount(this.selectLogin.list[0])
						}else{
							this.loginStep = 2
						}
					}else{
						this.$message({
							type: 'error',
							message: '暂无权限可登录',
							duration: 5000
						})
					}
				})
			}).catch((res) => {
				// 刷新
				// this.getSlideCaptch();
				// // this.form.countResult = "";
				// this.$refs.verifyElement.refreshVerify(); //用ref直接操纵这个组件里面的这个方法
				// // console.log(11111111)
				// let timer = setInterval(() => {
				// 	this.loading = false;
				// 	clearInterval(timer)
				// }, 1000)
				this.close(false)
			})
		},
		getGuiCode() {
			this.$axios.get('/Captch/GetCountGuid').then((res) => {
				this.form.guid = res.guid;
				if (this.countCodeImg == '') {
					this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid;
				} else {
					// this.$refs.countCodeImg.src = this.baseURL + '/Captch/CountCode?guid' + res.guid;
					this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid
					// console.log(this.baseURL + '/Captch/CountCode?guid' + res.guid)
				}
			}).catch((err) => {
				this.loading = false
			})
		},
		goBack() {
			this.$router.go(-1)
		},
		changeLogontype(status, link) {
			this.logontype = status
			this.apiLink = link
			this.$refs.form.clearValidate()
		},
		// 登录
		submitdata(formName) { //提交数据
			this.loading = true;
			var that = this;
			that.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.logontype) {
						// 登录类型判断，true为验证码登录
						this.decideCode()
					} else {
						this.getSlideCaptch();
					}
				} else {
					if (that.form.password == '') {
						that.$message({
							type: 'error',
							message: '请输入密码',
							duration: 5000
						})
					} else if (that.form.mobile == '') {
						that.$message({
							type: 'error',
							message: '请输入手机号',
							duration: 5000
						})
					}
					this.loading = false;
				}
			})
		},
		// 选择登录站点
		selectLoginAccount(item){
			let lifeData = {
				authorization: this.selectLogin.tempToken,
				userid: this.selectLogin.userid,
				operatorid: item.id
			}
			if(item.operatorManager){
				localStorage.setItem('useTemplate',0)
				localStorage.setItem('useTemplate',0)
			}else{
				localStorage.setItem('useTemplate',1)
				localStorage.setItem('useTemplate',1)
			}
			this.$store.dispatch('setInitData',lifeData).then(()=>{
				this.$message({
					type: 'success',
					message: '登陆成功',
					duration: 5000
				})
				if(item.operatorManager){ 
					this.$router.push({
						path:'/'
					})
				}else{
					this.$router.push({
						path:'/franchisee/shop/list'
					})
				}
			})
		},
		getTelCode() {
			if (this.form.mobile == '') {
				this.$message.error('请输入手机号');
				return
			}
			this.getSlideCaptch()
		},
		goiframe(url, title) {
			this.iframe.link = url;
			this.iframe.title = title;
			this.dialogVisible = true
		}
	}
}
</script>
<style scoped>
.dialogPage>>>.el-dialog__body {
	padding: 0px;
}

.dialogPage>>>.el-dialog__header {
	padding: 20px 20px 0px;
}
</style>
<style lang="scss" scoped>
.body {
	background-color: var(--light)
}

.dialogCode {
	.main {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--grey);
	}

	.inputCode {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}
}

.dialog-text {
	padding-left: 48px;
	padding-bottom: 30px;
}

.copyright {
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 16px;
	color: var(--grey);
	padding: 15px 0;
}

.loginbox {
	width: 1200px;
	height: calc(100vh - 40px);
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	// background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;

	.con {
		box-shadow: 0 2px 12px 0 #0000002e;
		// height: 584px;

		.left-box {
			background-color: #f3faff;
			position: relative;
			width: 470px;

			.text-content {
				position: absolute;
				top: 0;
				width: 100%;
				padding: 44px 50px 0 50px;
				box-sizing: border-box;

				h3 {
					font-size: 28px;
					margin-top: 0;
					margin-bottom: 15px;
					font-weight: inherit;
				}

				.s_text {
					color: var(--gray);
					line-height: 24px;
				}
			}
		}

		.left-box-img {
			width: 360px;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.right-box {
			overflow: hidden;

			.logon {
				padding: 0px 44px 24px;
				height: 100%;
				width: 470px;
			}
		}
	}

	// 这个是进来的登录页面的样式
	.logon {

		// .img{
		//   width: 70px;
		//   height: 70px;
		//   margin: 0 auto;
		//   background-image: url("@/static/images/logo.png");
		//   background-position: center;
		//   background-size: cover;
		// }
		.logo {
			// width: 70px;
			// height: 70px;
			// margin: 0 auto;
			text-align: center;
			color: var(--red);
			font-size: 70px;
			line-height: 70px;
			padding-top: 24px;
			// background-image: url("@/static/images/logo.png");
			// background-position: center;
			// background-size: cover;
		}

		.title {

			h1 {
				width: 100%;
				text-align: center;
				font-weight: 700;
				font-size: 24px;
				color: #283548;
			}

			// .img{
			//  width: 48px;
			//   height: 48px;
			//   background-color: red;

			//   background-position: center;
			//   background-size: cover;
			// }
		}

		width: 500px;
		background-color: white;
		margin: 0 auto;
		padding: 60px 44px 24px;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;

		h1 {
			font-size: 22px;

			// padding-right: 60px;
		}

		ul {
			display: flex;

			li {
				height: 54px;
				width: 50%;
				line-height: 54px;
				text-align: center;
				border-bottom: 2px solid var(--light);

				&:hover {
					cursor: pointer;
				}

				&.active1 {
					color: var(--main);
					border-bottom: 2px solid var(--main);
				}

				&.active {
					color: var(--main);
					border-bottom: 2px solid var(--main);
				}
			}
		}

		.inputtext {
			margin-top: 25px;
			position: relative;

			// 这个是密码登录的小眼睛
			.change {
				width: 460px;
				height: 133px;

				.footer {
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: var(--gray);

					a {
						font-size: 12px;

						&:hover {
							cursor: pointer;
						}
					}
				}
			}

			// 这个是短信登录的获取验证码
			.change1 {
				width: 460px;
				height: 133px;

				.footer {
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: var(--gray);

					a {
						font-size: 12px;

						&:hover {
							cursor: pointer;
						}
					}
				}

				span {
					font-size: 12px;
					color: var(--gray);
				}

				#eyes {
					position: absolute;
					right: 15px;
					top: 175px;
					color: var(--blue);

					&:hover {
						cursor: pointer;
					}
				}
			}

			.button {
				width: 460px;
				margin: 0 auto;
				margin-top: 35px;
			}
		}
	}

	.bottomtips {
		display: flex;
		font-size: 12px;
		justify-content: space-between;
	}

	.bottom-b {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;

		a {
			flex: 1;
			text-align: center;
			color: var(--grey);
			border-right: 1px solid var(--grey);
			height: 15px;
			line-height: 15px;
			font-size: 12px;

			&:nth-child(2) {
				border: 0px;
			}
		}
	}

	.login-btn {
		display: block;
		width: 100%;
	}
}
.choosePoint{
	padding: 44px;
	width: 470px;
	box-sizing: border-box;
	background-color: #fff;
	.title{
		font-size: 22px;
    	margin-bottom: 30px;
	}
	.list{
		height: 350px;
    	overflow-y: auto;
		.item{
			border-top: 1px solid var(--border-light);
			padding: 10px 0;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&+.item{
				border-bottom: 1px solid var(--border-light);
			}
			.name{
				font-size: 18px;
				margin-bottom: 5px
			}
		}
	}
}
</style>
